<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> {{ title }} </title>
    <meta name="generator" content="XTestRunner {{ version }}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://telegraph-image-cq2.pages.dev/seldom-main.css">
    <link rel="stylesheet" href="http://telegraph-image-cq2.pages.dev/seldom-utilities.css">

    <style type="text/css" media="screen">
        body {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 80%;
        }

        table {
            font-size: 100%;
        }

        .table td {
            white-space: inherit !important;
        }

        /* -- heading ---------------------------------------------------------------------- */
        h1 {
            font-size: 16pt;
            color: gray;
        }

        pre {
            background-color: #eef2f7;
            padding-top: 10px;
            text-align: left;
            max-height: 600px;
            overflow: auto;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: rgba(114, 124, 245, .25);
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #6c757d;
        }

        .heading {
            margin-top: 20px;
            margin-bottom: 1ex;
            margin-left: 10px;
            margin-right: 10px;
            width: 23%;
            float: left;
            padding-top: 10px;
            padding-left: 10px;
            padding-bottom: 10px;
            padding-right: 10px;
            box-shadow: 0px 0px 5px #000;
        }

        .heading .attribute {
            margin-top: 1ex;
            margin-bottom: 0;
        }

        .heading .description {
            margin-top: 4ex;
            margin-bottom: 6ex;
        }

        /* -- css div popup ------------------------------------------------------------------------ */

        a.popup_link:hover {
            color: red;
        }

        .log_window {
            max-width: 70%;
            max-height: 70%;
        }

        /* -- report ------------------------------------------------------------------------ */
        .show_detail_line {
            margin-left: 10px;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .show_detail_button {
            margin-top: 3ex;
            margin-bottom: 1ex;
            margin-left: 10px;
            text-align: right;
            margin-right: 15px;
        }

        .header_row {
            font-weight: bold;
            color: #606060;
            border-top-width: 10px;
            border-color: #d6e9c6;
            font-size: 15px;
        }

        .total_row {
            font-weight: bold;
            background-color: #dee2e6;
        }

        .passedClass {
            background-color: #ccf5e7;
        }

        .failedClass {
            background-color: #ffe8cc;
        }

        .brokenClass {
            background-color: #f6b6c1;
        }

        .skippedClass {
            background-color: #d2cccc;
        }

        .passCase {
            color: #00CC88;
            font-weight: bold;
        }

        .failCase {
            color: #FF8C00;
            font-weight: bold;
        }

        .errorCase {
            color: #FF3366;
            font-weight: bold;
        }

        .hiddenRow {
            display: none;
        }

        .caseStatistics {
            width: 46%
        }

        .none {
            color: #009900
        }

        .testcase {
            margin-left: 2em;
        }

        /* -- chars ---------------------------------------------------------------------- */
        .testChars {
            width: 900px;
            margin-left: 0px;
        }

        .error-color {
            color: #fff;
            background-color: #f44455;
            border-color: #f44455;
        }

        .pass-color {
            color: #fff;
            background-color: #5fc27e;
            border-color: #5fc27e;
        }

        .fail-color {
            color: #fff;
            background-color: #fcc100;
            border-color: #fcc100;
        }

        .skip-color {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
        }

        /* -- screenshots ---------------------------------------------------------------------- */
        .img {
            border-collapse: collapse;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .img-card {
            height: 600px;
            width: 800px;
            background-color: #e7eaf0;
        }

        .img-circle {
            height: 20px;
            border-radius: 12px;
            background-color: red;
            padding-left: 13px;
            margin: 0 auto;
            position: relative;
            top: -40px;
            background-color: rgba(1, 150, 0, 0.3);
        }

        .img-circle font {
            border: 1px solid white;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            margin-right: 9px;
            margin-top: 4px;
            display: block;
            float: left;
            background-color: white;
        }

        .close-shots {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 99;
        }

        .footer {
            height: 50px;
            width: 100%;
            position: fixed;
            bottom: 0;
        }

        #headContainer {
            margin-top: 20px;
            margin-bottom: 20px;
            padding-left: 30px;
            padding-right: 30px;
        }

        .head-list {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #resultContainer {
            margin-left: 30px;
            margin-right: 30px;
        }


    </style>

</head>
<body style="background-color: #f5f9fc;">
<script language="javascript" type="text/javascript">
    function showLog(id) {
        document.body.style.overflow = 'hidden'
        document.body.style.height = '100%'
        document.getElementById(id).style.display = 'block'
    }

    function hideLog(id) {
        document.body.style.overflow = 'auto';
        document.getElementById(id).style.display = 'none'
    }

    function showImg(obj) {
        document.body.style.overflow = 'hidden'
        document.body.style.height = '100%'
        var nextObj = obj.nextElementSibling
        nextObj.style.display = 'block'
        var index = 0;   //每张图片的下标，
        var len = nextObj.getElementsByTagName('img').length;
        var imgCircle = nextObj.getElementsByClassName('img-circle')[0]
        nextObj.onmouseover = function () {  //当鼠标光标停在图片上，则停止轮播
            clearInterval(start);
        }
        nextObj.onmouseout = function () {  //当鼠标光标停在图片上，则开始轮播
            start = setInterval(autoPlay, 1000);
        }
        for (var i = 0; i < len; i++) {
            var fontTag = document.createElement('font')
            imgCircle.appendChild(fontTag)
        }
        var fontTagList = nextObj.getElementsByTagName('font');  //得到所有圆圈
        changeImg(0)
        var funny = function (i) {
            fontTagList[i].onmouseover = function () {
                index = i
                changeImg(i)
            }
        }
        for (var i = 0; i < fontTagList.length; i++) {
            funny(i);
        }

        function autoPlay() {
            if (index > len - 1) {
                index = 0;
                clearInterval(start); //运行一轮后停止
            }
            changeImg(index++);
        }

        imgCircle.style.width = 30 * len + "px";

        // 对应圆圈和图片同步
        function changeImg(index) {
            var imgTags = nextObj.getElementsByTagName('img');
            var fontTags = nextObj.getElementsByTagName('font');
            for (i = 0; i < fontTags.length; i++) {
                imgTags[i].style.display = 'none';
                fontTags[i].style.backgroundColor = 'white';
            }
            imgTags[index].style.display = 'block';
            if (fontTags.length > 0) {
                fontTags[index].style.backgroundColor = 'red';
            }
        }
    }

    function hideImg(obj) {
        document.body.style.overflow = 'auto';
        obj.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = "none";
        obj.parentElement.parentElement.parentElement.getElementsByClassName('img-circle')[0].innerHTML = "";
    }

    output_list = Array();

    /* result
    - passed
    - failed
    - error
    - All
    */
    function showCase(result) {
        trs = document.getElementsByTagName("tr");
        for (var i = 1; i < trs.length; i++) {
            tr = trs[i];
            td_result = tr.children[5].innerHTML;
            if (td_result !== result) {
                tr.style.display = "none";
            } else {
                tr.style.display = "";
            }
            if (result === "all") {
                tr.style.display = "";
            }

        }
    }

    function showClassDetail(cid, count) {
        var id_list = Array(count);
        var toHide = 1;
        for (var i = 0; i < count; i++) {
            tid0 = 't' + cid.substr(1) + '.' + (i + 1);
            tid = 'f' + tid0;
            tr = document.getElementById(tid);
            if (!tr) {
                tid = 'p' + tid0;
                tr = document.getElementById(tid);
            }
            if (!tr) {
                tid = 'e' + tid0;
                tr = document.getElementById(tid);
            }
            if (!tr) {
                tid = 's' + tid0;
                tr = document.getElementById(tid);
            }
            id_list[i] = tid;
            if (tr.className) {
                toHide = 0;
            }
        }
        for (var i = 0; i < count; i++) {
            tid = id_list[i];
            if (toHide) {
                document.getElementById(tid).className = 'hiddenRow';
            } else {
                document.getElementById(tid).className = '';
            }
        }
    }

    function showTestDetail(div_id) {
        var detailsDiv = document.getElementById(div_id)
        var displayState = detailsDiv.style.display

        if (displayState != 'block') {
            displayState = 'block'
            detailsDiv.style.display = 'block'
        } else {
            detailsDiv.style.display = 'none'
        }
    }

    function html_escape(s) {
        s = s.replace(/&/g, '&amp;');
        s = s.replace(/</g, '&lt;');
        s = s.replace(/>/g, '&gt;');
        return s;
    }
</script>

{{ heading }}
{{ report }}
{{ chart_script }}


</body>

</html>